<template>
	<view class="user-reply">
		<block v-if="show">
			<view class="user-reply-tabs">
				<u-tabs
					:is-scroll="false"
					:list="replyTabs"
					active-color="#141414"
					:current="replyIndex"
					@change="change">
				</u-tabs>
			</view>
			<view class="user-QA-list" v-if="replyIndex==0">
				<view class="user-QA-item" v-for="(data,index) in noAnswer" :key="index">
					<view class="user-QA-item-title">
						<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/QA/Q.png"></image>
						<text>{{data.content}}</text>
						<view class="img" v-if="data.img">
							<image :src="imgItem" @click.stop="prevImg(imgItem,data.imgs)" v-for="(imgItem,imgI) in data.imgs" :key="imgI"></image>
						</view>
					</view>
					<view class="user-QA-item-pro" @click="goProInfo(data.goods_id)" v-if="data.goods">
						<image :src="data.goods.image_thumb" mode="aspectFill"></image>
						<view class="user-QA-item-pro-info">
							<view class="user-QA-item-pro-tit">{{data.goods.goods_name}}</view>
							<view class="user-QA-item-pro-code">编码：{{data.goods.goods_sn}}</view>
						</view>
					</view>
					<view class="user-QA-item-userInfo">
						<text class="time"><text class="name">{{data.user.nickname}}</text> 提问于 {{data.add_time}}</text>
						<view class="btn" v-if="userInfo.is_admin!=0" @click="answer(data,index)">立即回答</view>
					</view>
				</view>
				<pt-nothing
					text="暂无待回答提问"
					:fixed="true"
					v-if="noMore && !noAnswer.length" 
					top="80" 
					icon="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/nothing.png?v=1">
				</pt-nothing>
			</view>
			<view class="user-QA-list" v-if="replyIndex==1">
				<view class="user-QA-item" v-for="(data,index) in PendingAnswer" :key="index">
					<view class="user-QA-item-title">
						<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/QA/Q.png"></image>
						<text>{{data.ask_content}}</text>
					</view>
					<view class="user-QA-item-answer">
						<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/QA/A.png"></image>
						<view style="flex: 1;">
							<text>{{data.content}}</text>
							<view class="img" v-if="data.img">
								<image :src="imgItem" @click.stop="prevImg(imgItem,data.imgs)" v-for="(imgItem,imgI) in data.imgs" :key="imgI"></image>
							</view>
							<text class="change" @click="editAnswer(data.ask_answer_id,data.content)" v-if="userInfo.role_type==6 || userInfo.role_type==7">修改</text>
						</view>
					</view>
					<view class="user-QA-item-pro" @click="goProInfo(data.goods_id)" v-if="data.goods">
						<image :src="data.goods.image_thumb" mode="aspectFill"></image>
						<view class="user-QA-item-pro-info">
							<view class="user-QA-item-pro-tit">{{data.goods.goods_name}}</view>
							<view class="user-QA-item-pro-code">编码：{{data.goods.goods_sn}}</view>
						</view>
					</view>
					<view class="user-QA-item-userInfo">
						<text class="time"><text class="name">{{data.user.nickname}}</text> 回答于 {{data.add_time}}</text>
						<view class="btn" v-if="userInfo.role_type==6 || userInfo.role_type==7" @click="review(data.ask_answer_id,data.ask_id)">审核</view>
					</view>
				</view>
				<pt-nothing
					text="暂无待审核回复"
					:fixed="true"
					v-if="noMore1 && !PendingAnswer.length" 
					top="80" 
					icon="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/nothing.png?v=1">
				</pt-nothing>
			</view>
			<view class="user-QA-list" v-if="replyIndex==2">
				<view class="user-QA-item" v-for="(data,index) in passedList" :key="index">
					<view class="user-QA-item-title">
						<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/QA/Q.png"></image>
						<text :class="[{red: !data.ask_content}]">{{data.ask_content?data.ask_content:'此提问已被删除！'}}</text>
					</view>
					<view class="user-QA-item-answer">
						<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/QA/A.png"></image>
						<view style="flex: 1;">
							<text>{{data.content}}</text>
							<view class="img" v-if="data.img">
								<image :src="imgItem" @click.stop="prevImg(imgItem,data.imgs)" v-for="(imgItem,imgI) in data.imgs" :key="imgI"></image>
							</view>
						</view>
					</view>
					<view class="user-QA-item-pro" @click="goProInfo(data.goods_id)" v-if="data.goods">
						<image :src="data.goods.image_thumb" mode="aspectFill"></image>
						<view class="user-QA-item-pro-info">
							<view class="user-QA-item-pro-tit">{{data.goods.goods_name}}</view>
							<view class="user-QA-item-pro-code">编码：{{data.goods.goods_sn}}</view>
						</view>
					</view>
					<view class="user-QA-item-userInfo">
						<text class="time"><text class="name">{{data.user.nickname}}</text> 回答于 {{data.add_time}}</text>
					</view>
				</view>
				<pt-nothing
					text="暂无已通过回复"
					:fixed="true"
					v-if="noMore2 && !passedList.length" 
					top="80" 
					icon="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/nothing.png?v=1">
				</pt-nothing>
			</view>
			<pt-nomore v-if="noMore && noAnswer.length && replyIndex==0"></pt-nomore>
			<pt-nomore v-if="noMore1 && PendingAnswer.length && replyIndex==1"></pt-nomore>
			<pt-nomore v-if="noMore2 && passedList.length && replyIndex==2"></pt-nomore>
			<pt-loading-more v-if="isLoading"></pt-loading-more>
		</block>
		
		<pt-loading></pt-loading>
		
		<uni-popup type="bottom" ref="answerQuestion" @change="answerPopChange">
			<view class="answer-question">
				<view class="answer-question-tit">{{questionInfo.question_tit}}</view>
				<textarea 
					:focus="false" 
					:adjust-position="true" 
					placeholder="温馨提醒：为了更好的安全服务，回复过程中禁止出现微信、手机号码，厂家请勿私加客户微信，谢谢！" 
					v-model="questionInfo.content" 
					placeholder-style="color: #888; font-size: 28rpx"
					:fixed="true" 
					:cursor-spacing="50">
				</textarea>
				<view class="upimg">
					<u-upload 
						:action="action" 
						:form-data="formData" 
						:max-count="3" 
						width="160" 
						@on-uploaded="onSuccess"
						@on-remove="onRemove"
						@on-choose-complete="onChooseComplete"
						:preview-full-image="false"
						image-mode="aspectFit"
						:show-progress="false">
					</u-upload>
				</view>
				<view :class="['complate',{isSubmit: isSubmit}]" @click="$u.throttle(submit, 2000)">
					<u-loading mode="flower" style="margin-right: 20rpx;" v-if="isSubmit"></u-loading>
					完成
				</view>
			</view>
		</uni-popup>
		
		<uni-popup type="dialog" ref="reviewPopup">
			<uni-popup-dialog
				title="温馨提示"
				content="是否通过此条回复消息？"
				@confirm="confirm">
			</uni-popup-dialog>
		</uni-popup>
		
		<uni-popup type="bottom" ref="changeAnswer">
			<view class="answer-question">
				<view class="answer-question-tit">修改回复</view>
				<textarea 
					:focus="false" 
					:adjust-position="true" 
					placeholder="温馨提醒：为了更好的安全服务，回复过程中禁止出现微信、手机号码，厂家请勿私加客户微信，谢谢！" 
					v-model="answerContent"
					:fixed="true"
					:cursor-spacing="50">
				</textarea>
				<view :class="['complate',{isSubmit: isChangeSubmit}]"  @click="$u.throttle(confirmChange, 2000)">
					<u-loading mode="flower" style="margin-right: 20rpx;" v-if="isChangeSubmit"></u-loading>
					完成
				</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	import FormData from '@/api/http.interceptor.js'
	export default {
		components:{
			uniPopupDialog
		},
		data() {
			return {
				show: true,
				userInfo: '',
				replyIndex: 0,
				replyTabs: [{
					name: '待回答(0)'
				},{
					name: '待审核(0)'
				},{
					name: '已通过(0)'
				}],
				page: 0,
				noMore: false,
				noAnswer: [],
				isLoading: false,
				isSubmit: false,
				questionInfo: {
					goods_id: '',
					index: '',
					type: '',
					question_tit: '',
					ask_id: '',
					content: ''
				},
				page1: 0,
				noMore1: false,
				PendingAnswer: [],
				ask_answer_id: '',
				ask_id: '',
				answerContent: '',
				passedList: [],
				page2: 0,
				noMore2: false,
				isChangeSubmit: false,
				Refresh: false,
				action: `${this.$domain}/api/Upimg/UpImg`,
				formData: FormData.sign(),
				imgLists: []
			};
		},
		onPullDownRefresh() {
			this.Refresh = true
			
			setTimeout(() => {
				this.show = false
				
				this.noAnswer = []
				this.page = 0
				this.noMore = false
				
				this.PendingAnswer = []
				this.page1 = 0
				this.noMore1 = false
				
				this.passedList = []
				this.page2 = 0
				this.noMore2 = false
				
				this.init()
			},500)
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')):''
			this.init()
			// 设置当前链接，登录成功返回当前链接
			let pages = getCurrentPages();
			let curPage = pages[pages.length - 1];
			uni.setStorageSync('newurl',curPage.$page.fullPath)
		},
		onReachBottom() {
			if(this.replyIndex==0){
				if(!this.noMore){
					this.page++
					this.isLoading = true
					this.getToBeAnswer()
				}
			}else if(this.replyIndex==1){
				if(!this.noMore1){
					this.page1++
					this.isLoading = true
					this.getPendingAnswer()
				}
			}else if(this.replyIndex==2){
				if(!this.noMore2){
					this.page2++
					this.isLoading = true
					this.getPassedAnswer()
				}
			}
		},
		methods: {
			init(){
				this.getToBeAnswer()
				this.getPendingAnswer()
				this.getPassedAnswer()
			},
			change(e){
				this.replyIndex = e
				this.noAnswer = []
				this.page = 0
				this.noMore = false
				this.PendingAnswer = []
				this.page1 = 0
				this.noMore1 = false
				this.passedList = []
				this.page2 = 0
				this.noMore2 = false
				this.init()
			},
			// 获取待回答列表
			getToBeAnswer(){
				let data = {
					page: this.page,
					get_goods: 2,
					is_answer: 0
				}
				if(this.userInfo.role_type==1){
					data.user_id = this.userInfo.user_id
				}else if(this.userInfo.role_type==2 || this.userInfo.role_type==3 || this.userInfo.role_type==4 || this.userInfo.role_type==11){
					data.store_id = this.userInfo.store_id
				}else if(this.userInfo.role_type==8 || this.userInfo.role_type==10 || this.userInfo.role_type==12){
					data.factory_sn = this.userInfo.factory_sn
				}
				this.$u.api.AskLists(data).then(res => {
					this.show = true
					this.isLoading = false
					if(res.counts){
						this.replyTabs[0].name = '待回答('+res.counts+')'
					}
					if(res.datas.length){
						res.datas.forEach(item => {
							if(item.img){
								this.$set(item,'imgs',item.img.split(','))
							}
							this.noAnswer.push(item)
						})
					}else{
						this.noMore = true
					}
					if(this.Refresh){
						this.Refresh = false
						uni.stopPullDownRefresh({
							success: () => {
								uni.showToast({
									icon: 'none',
									title: '刷新成功'
								})
							}
						})
					}
				})
			},
			// 获取待审核列表
			getPendingAnswer(){
				let data = {
					page: this.page1,
					get_goods: 2,
					status: 3
				}
				if(this.userInfo.role_type==2 || this.userInfo.role_type==3 || this.userInfo.role_type==4 || this.userInfo.role_type==11){
					data.store_id = this.userInfo.store_id
				}else if(this.userInfo.role_type==8 || this.userInfo.role_type==10 || this.userInfo.role_type==12){
					data.factory_sn = this.userInfo.factory_sn
				}
				this.$u.api.AnswerList(data).then(res => {
					this.show = true
					this.isLoading = false
					if(res.counts){
						this.replyTabs[1].name = '待审核('+res.counts+')'
					}
					if(res.datas.length){
						res.datas.forEach(item => {
							if(item.img){
								this.$set(item,'imgs',item.img.split(','))
							}
							this.PendingAnswer.push(item)
						})
					}else{
						this.noMore1 = true
					}
				})
			},
			// 获取已通过列表
			getPassedAnswer(){
				let data = {
					page: this.page2,
					get_goods: 2,
					status: 1
				}
				if(this.userInfo.role_type==2 || this.userInfo.role_type==3 || this.userInfo.role_type==4 || this.userInfo.role_type==11){
					data.store_id = this.userInfo.store_id
				}else if(this.userInfo.role_type==8 || this.userInfo.role_type==10 || this.userInfo.role_type==12){
					data.factory_sn = this.userInfo.factory_sn
				}
				this.$u.api.AnswerList(data).then(res => {
					this.show = true
					this.isLoading = false
					if(res.counts){
						this.replyTabs[2].name = '已通过('+res.counts+')'
					}
					if(res.datas.length){
						res.datas.forEach(item => {
							if(item.img){
								this.$set(item,'imgs',item.img.split(','))
							}
							this.passedList.push(item)
						})
					}else{
						this.noMore2 = true
					}
				})
			},
			answer(data,index){
				this.questionInfo.goods_id = data.goods_id
				this.questionInfo.content = '1'
				this.questionInfo.index = index
				this.questionInfo.question_tit = data.content
				this.questionInfo.ask_id = data.ask_id
				this.$refs.answerQuestion.open()
				// this.$nextTick(() => {
				// 	this.questionInfo.content = ''
				// })
			},
			submit(){
				if(!this.questionInfo.content){
					uni.showToast({
						icon: 'none',
						title: '请输入回答内容'
					})
					return
				}
				if(this.isSubmit){
					uni.showToast({
						icon: 'none',
						title: '请勿重复提交'
					})
					return
				}
				this.isSubmit = true
				this.$u.api.AddAnswer({
					type: this.questionInfo.type,
					ask_id: this.questionInfo.ask_id,
					content: this.questionInfo.content,
					goods_id: this.questionInfo.goods_id,
					img: this.imgLists.join(',')
				}).then(res => {
					this.isSubmit = false
					uni.showToast({
						icon: 'none',
						title: '回答成功'
					})
					this.noAnswer = []
					this.page = 0
					this.noMore = false
					this.PendingAnswer = []
					this.page1 = 0
					this.noMore1 = false
					this.passedList = []
					this.page2 = 0
					this.noMore2 = false
					this.init()
					this.$refs.answerQuestion.close()
				}).catch(() => {
					this.isSubmit = false
				})
			},
			goProInfo(goods_id){
				getApp().goProInfo(goods_id)
			},
			// 编辑回复弹窗
			editAnswer(ask_answer_id,content){
				this.answerContent = content
				this.ask_answer_id = ask_answer_id
				this.$refs.changeAnswer.open()
			},
			// 确认编辑回复
			confirmChange(){
				if(!this.answerContent){
					uni.showToast({
						icon: 'none',
						title: '回复内容不能为空'
					})
					return false
				}else if(this.isChangeSubmit){
					uni.showToast({
						icon: 'none',
						title: '请勿重复提交'
					})
					return false
				}
				this.isChangeSubmit = true
				let data = {
					content: this.answerContent,
					ask_answer_id: this.ask_answer_id
				}
				this.$u.api.AnswerUp(data).then(res => {
					this.isChangeSubmit = false
					uni.showToast({
						icon: 'none',
						title: '修改成功'
					})
					this.noAnswer = []
					this.page = 0
					this.noMore = false
					this.PendingAnswer = []
					this.page1 = 0
					this.noMore1 = false
					this.passedList = []
					this.page2 = 0
					this.noMore2 = false
					this.init()
					this.$refs.changeAnswer.close()
				}).catch(() => {
					this.isChangeSubmit = true
				})
			},
			// 审核确认弹窗
			review(ask_answer_id,ask_id){
				this.ask_answer_id = ask_answer_id
				this.ask_id = ask_id
				this.$refs.reviewPopup.open()
			},
			// 确认审核通过
			confirm(){
				let data = {
					status: 1,
					ask_id: this.ask_id,
					ask_answer_id: this.ask_answer_id
				}
				this.$u.api.AnswerCheck(data).then(res => {
					this.page1 = 0
					this.noMore1 = false
					this.PendingAnswer = []
					this.ask_answer_id = ''
					this.ask_id = ''
					this.answerContent = ''
					uni.showToast({
						icon: 'none',
						title: '审核成功'
					})
					this.noAnswer = []
					this.page = 0
					this.noMore = false
					this.PendingAnswer = []
					this.page1 = 0
					this.noMore1 = false
					this.passedList = []
					this.page2 = 0
					this.noMore2 = false
					this.init()
					this.$refs.reviewPopup.close()
				})
			},
			onSuccess(lists, name){
				this.imgLists = []
				if(lists.length){
					lists.forEach(item => {
						this.imgLists.push(item.response.datas[0])
					})
				}
				uni.hideLoading()
				uni.showToast({
					icon: 'none',
					title: '上传成功'
				})
			},
			onRemove(index, lists){
				this.imgLists = []
				if(lists.length){
					lists.forEach(item => {
						this.imgLists.push(item.response.datas[0])
					})
				}
			},
			onChooseComplete(){
				uni.showLoading({
					title: '上传中'
				})
			},
			answerPopChange(e){
				if(e.show){
					this.$nextTick(() => {
						this.questionInfo.content = ''
					})
					// setTimeout(() => {
					// 	this.questionInfo.content = ''
					// },500)
				}
			},
			prevImg(img,urls){
				uni.previewImage({
					urls: urls,
					current: img
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f7f7f7;
	}
	.user-reply-tabs{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10;
	}
	.user-QA-list{
		padding: 110rpx 30rpx 0;
		.user-QA-item{
			background-color: #FFF;
			padding: 30rpx;
			border-radius: 8rpx;
			margin-bottom: 40rpx;
			&:last-child{
				margin-bottom: 0;
			}
			.user-QA-item-title{
				display: flex;
				image{
					width: 32rpx;
					height: 32rpx;
					margin: 6rpx 10rpx 0 0;
				}
				.img{
					margin-top: 10rpx;
					image{
						width: 100rpx;
						height: 100rpx;
					}
				}
				text{
					font-size: 32rpx;
					font-weight: bold;
					flex: 1;
					min-width: 0;
					&.red{
						color: red;
					}
				}
			}
			.user-QA-item-answer{
				display: flex;
				margin-top: 20rpx;
				image{
					width: 32rpx;
					height: 32rpx;
					margin: 6rpx 10rpx 0 0;
				}
				.img{
					margin-top: 10rpx;
					image{
						width: 100rpx;
						height: 100rpx;
					}
				}
				text{
					margin-bottom: 10rpx;
					color: #444;
					font-size: 28rpx;
					&.change{
						display: inline-block;
						background-color: #141414;
						color: #FFF;
						padding: 5rpx 10rpx;
						border-radius: 8rpx;
						font-size: 24rpx;
						margin-left: 10rpx;
					}
				}
			}
			.user-QA-item-pro{
				display: flex;
				align-items: center;
				margin-top: 30rpx;
				image{
					width: 136rpx;
					height: 136rpx;
				}
				.user-QA-item-pro-info{
					margin-left: 20rpx;
					flex: 1;
					min-width: 0;
					.user-QA-item-pro-tit{
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						font-size: 28rpx;
						color: #444;
					}
					.user-QA-item-pro-code{
						margin-top: 40rpx;
						color: #A4A4A4;
						font-size: 22rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
			}
			.user-QA-item-userInfo{
				border-top: solid 2rpx #EEE;
				padding-top: 40rpx;
				margin-top: 40rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.time{
					color: #909090;
					font-size: 22rpx;
					display: flex;
					align-items: center;
					.name{
						display: inline-block;
						max-width: 4em;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						vertical-align: middle;
						margin: -4rpx 5rpx 0 0;
					}
				}
				.btn{
					color: #FFF;
					background-color: #141414;
					border-radius: 8rpx;
					height: 52rpx;
					line-height: 52rpx;
					padding: 0 10rpx;
					font-size: 24rpx;
				}
			}
		}
	}
	.answer-question{
		background-color: #FFF;
		padding: 30rpx;
		border-radius: 10rpx 10rpx 0 0;
		.answer-question-tit{
			font-weight: bold;
			font-size: 30rpx;
		}
		textarea{
			width: 100%;
			margin: 20rpx 0;
			height: 200rpx;
			font-size: 28rpx;
		}
		.upimg{
			margin: -4px;
			padding-bottom: 20rpx;
		}
		.complate{
			height: 80rpx;
			line-height: 80rpx;
			background-color: #141414;
			color: #FFF;
			border-radius: 8rpx;
			text-align: center;
			font-size: 30rpx;
			&.isSubmit{
				opacity: .5;
			}
		}
	}
</style>
